<template>
  <page-container>
    <public-page-search
      @page-search-change="pageSearchChange"
      @onQuery="handleQuery"
    ></public-page-search>
    <a-row :span="24" :gutter="10" style="margin-top: 10px">
      <a-col :span="12">
        <a-card title="颗粒要素占比统计" size="small" style="height: 423px">
          <a-spin :spinning="loading1">
            <active-pie
              :data="pieData"
              :height="350"
              :fieldNames="{
                name: 'featureName',
                value: 'caseNum',
              }"
              @zrender:click="intelligenceClick"
              key="pie"
              title="要素总量"
              v-if="pieData.length"
            />
            <a-empty v-else style="margin-top: 101px" />
          </a-spin>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="要素涉警量排名(top30)" size="small" style="height: 423px">
          <a-spin :spinning="loading2">
            <bar
              v-if="histogramhList.length"
              :data="histogramhList"
              :height="350"
              type="传统"
              :fieldNames="{
                name: 'featureValue',
                value: 'caseNum',
              }"
              @zrender:click="chartClickHandle"
            />
            <a-empty v-else style="margin-top: 101px" />
          </a-spin>
        </a-card>
      </a-col>
    </a-row>
    <police-list-drawer
      v-model:visible="visible"
      :title="listTile"
      :portionUrl="portionUrl"
      :params="policeDrawerParams"
      topicType="ct"
    />
  </page-container>
</template>
<script lang="ts">
import PublicPageSearch from '@/views/routine-analysis/list/components/public-page-search/index.vue';
import { ref, defineComponent, reactive } from 'vue';
import { queryCaseFeatureStat, queryFeatureValue } from '@/api/intelligentanalysis/grain';
import bar from '@/components/charts/bar/index.vue';
import ActivePie from '@/components/charts/pie/active-pie/index.vue';
import PoliceListDrawer from '@/components/police-list-drawer/index.vue';
import { PublicQueryState } from '@/views/intelligent-analysis/typing';
import { getInitParams } from '@/views/intelligent-analysis/js/publicQuery';
import { isNil } from 'lodash';

export default defineComponent({
  name: 'intelligent-analysis-grain', // AI专题感知-情报颗粒
  components: {
    PublicPageSearch,
    PoliceListDrawer,
    ActivePie,
    bar,
  },
  setup() {
    const spinning = ref<boolean>(true);
    const visible = ref<boolean>(false);
    const listTile = ref<string>('');
    const portionUrl = ref<string>('');
    const policeDrawerParams = ref<any>([{}]);
    const histogramhList = ref<any>([]);
    const pieData = ref<any>([]);
    const publicParams = getInitParams('statistics');
    const loading1 = ref(false);
    const loading2 = ref(false);

    const queryForm: PublicQueryState = reactive({
      ...publicParams,
      searchType: '1',
      featureCode: '',
    });
    // AI专题感知-情报颗粒度-饼图
    const handleCaseFeatureStat = () => {
      loading1.value = true;
      queryCaseFeatureStat(queryForm)
        .then(res => {
          if (res.code === 200) {
            pieData.value = res.data;
          } else {
            pieData.value = [];
          }
        })
        .catch(err => {
          pieData.value = [];
          console.log('AI专题感知-情报颗粒度-饼图err=', err);
        })
        .finally(() => {
          loading1.value = false;
        });
    };
    // AI专题感知-情报颗粒度-柱状图
    const handlequeryFeatureValue = () => {
      loading2.value = true;
      queryFeatureValue(queryForm)
        .then(res => {
          if (res.code === 200) {
            histogramhList.value = res.data;
          } else {
            histogramhList.value = [];
          }
        })
        .catch(err => {
          histogramhList.value = [];
          console.log('AI专题感知-情报颗粒度-柱状图err=', err);
        })
        .finally(() => {
          loading2.value = false;
        });
    };

    const chartClickHandle = e => {
      visible.value = true;
      listTile.value = histogramhList.value[e].featureValue;
      portionUrl.value = '/aitype/caseInfo/queryCaseList';
      const featureCode = histogramhList.value[e].featureCode;
      const featureValue = histogramhList.value[e].featureValue;
      policeDrawerParams.value = {
        ...queryForm,
        inputParams: queryForm.inputParams,
        element: featureValue,
        featureCode,
        featureValue,
        grain: true,
        page: 1,
        size: 10,
      };
    };
    const intelligenceClick = (e: any) => {
      const dataIndex = e?.target?.dataIndex;
      if (!isNil(dataIndex)) {
        const featureCode = pieData.value[dataIndex].featureCode;
        if (queryForm.featureCode == featureCode) {
          queryForm.featureCode = '';
        } else {
          queryForm.featureCode = featureCode;
        }
      } else {
        queryForm.featureCode = '';
      }
      handlequeryFeatureValue();
    };
    let flag = ref<boolean>(true);
    const pageSearchChange = params => {
      Object.keys(queryForm).forEach(key => {
        Object.prototype.hasOwnProperty.call(params, key) && (queryForm[key] = params[key]);
      });
      queryForm.featureCode = '';
      if (flag.value) {
        handleCaseFeatureStat();
        handlequeryFeatureValue();
        flag.value = false;
      }
    };
    //点击搜索
    const handleQuery = () => {
      handleCaseFeatureStat();
      handlequeryFeatureValue();
    };
    return {
      listTile,
      visible,
      portionUrl,
      policeDrawerParams,
      chartClickHandle,
      histogramhList,
      handleCaseFeatureStat,
      pieData,
      intelligenceClick,
      pageSearchChange,
      loading1,
      loading2,
      handleQuery,
    };
  },
});
</script>
<style lang="less" scoped>
:deep(.ant-card-head) {
  height: 48px;
  padding-top: 5px;
  font-size: 14px;
  background: #34363c;
}
:deep(.ant-card-head-wrapper) {
  padding-top: 4px;
}
</style>
